<template>
  <view class="container">
	  
    <view class="new-coupon">
      <text>新增优惠券</text>
      <button @click="addCoupon">+新增</button>
    </view>
	
    <view class="status">
      <button :class="{'active': isOngoing}" @click="toggleStatus('ongoing')">进行中</button>
      <button :class="{'active': !isOngoing}" @click="toggleStatus('ended')">已结束</button>
    </view>
	
    <view class="coupon-list">
      <view v-for="(coupon, index) in coupons" :key="index" class="coupon-item">
        <view class="coupon-content">
			<view class="box1">
				<view class="text1">满288减</view>
				<view class="text2">15</view>
			</view>
			<view class="box2">
				<text>  
					优惠券名称：新用户专享体验券 
					有效期：2020.3.18-2020.4.18 
					每人限领1张
				</text>
			</view>
			
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isOngoing: true, // 控制优惠券状态的显示
      coupons: [ // 模拟的优惠券数据
        {
          condition: '满288减15',
          description: '优惠券名称：新用户专享体验券\n有效期：2020.3.18-2020.4.18\n每人限领1张'
        },
        // 可以添加更多优惠券数据
		{
		  condition: '满288减15',
		  description: '优惠券名称：新用户专享体验券\n有效期：2020.3.18-2020.4.18\n每人限领1张'
		},
      ]
    };
  },
  methods: {
    addCoupon() {
      // 新增优惠券的逻辑
      console.log('新增优惠券');
	  uni.navigateTo({
	  	url:"/pages/bfb-KaQuanGuanLi/distributeCoupons/distributeCoupons"
	  })
    },
    toggleStatus(status) {
      this.isOngoing = status === 'ongoing';
      // 根据状态过滤优惠券列表的逻辑
      console.log('切换状态', status);
    }
  }
};
</script>

<style>
.container {
  
}
.new-coupon {
	width: 100%;
	display: flex;
	justify-content: space-between;
  align-items: center;
  margin-bottom: 45px;
  border-bottom: 1px solid gainsboro;
  border-top: 1px solid gainsboro;
  padding: 35rpx 20rpx;
  
}
.new-coupon text{
	font-size: 36rpx;
	color: #007aff;
	font-weight: bold;
	margin: 0 85rpx;
}
.new-coupon button{
	height: 70rpx;
	line-height: 70rpx;
	width: 265rpx;
	font-size: 28rpx;
	font-weight:700;
}

.status {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.status button {
  /* padding: 10px 20px; */
  width: 220rpx;
  background-color: #f0f0f0;
  border: none;
  border-radius: 15px;
  font-size: 28rpx;
}
.status button.active {
  background-color: #007aff;
  color: white;
}
.coupon-list {
  margin-top: 20px;
  padding: 0 40rpx;
}
.coupon-item {
  background-color: #007aff;
  padding: 10px;
  margin-bottom: 40rpx;
  border-radius: 15rpx;
  
}
.coupon-content {
	
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box1{
	margin: 0 auto;
	color: white;
}
.text1{
	font-weight: bold;
}
.text2{
	font-size: 95rpx;
	font-weight: 500;
}
.box2{
	/* background-color: red; */
	padding: 15rpx 45rpx;
	border-left: 1px solid white;
}
.box2 text{
	color: #fff;
	font-size: 25rpx;
} 
</style>